<template>
    <div>
        <div class="serchHeader">
            <el-input v-model="userKeyWords" class="cateSerchBtn" size="mini" placeholder="请输入用户名称或者id搜索..."></el-input>
            <el-button icon="fa fa-search" size="mini" type="primary" @click="serchCategory"> 搜索用户</el-button>
        </div>
        <div>
            <el-card class="box-card" v-for="(user,index) in userData">
                <div slot="header" class="clearfix">
                    <span>用户昵称：{{user.nickname}}</span>
                    <el-button icon="fa fa-trash-o" style="float: right; padding: 3px 0" type="text">删除用户</el-button>
                </div>
                <div class="text">
                    <p>用户名称： {{user.username}}</p>
                    <p>用户昵称： {{user.nickname}}</p>
                    <p>加入时间： {{user.createTime}}</p>
                    <p v-if="user.gender == false">性别： 男</p>
                    <p v-else>性别： 女</p>
                    <p> 是否可用：
                        <el-switch
                                @change="switchChange(user,true)"
                                v-model="user.enabled"
                                active-color="#13ce66"
                                inactive-color="#ff4949"
                                active-text="启用"
                                inactive-text="禁用">
                        </el-switch></p>
                    <p>
                        是否锁定：
                        <el-switch
                                @change="switchChange(user,false)"
                                v-model="user.nonLocked"
                                active-color="#13ce66"
                                inactive-color="#ff4949"
                                active-text="解锁"
                                inactive-text="锁定">
                        </el-switch>
                    </p>
                    <p>
                        用户角色：
                        <el-select @change="tagChange(user)" @remove-tag="removeTag" class="rolesStyle" v-model="roleId" multiple placeholder="请选择">
                            <el-option
                                    v-for="role in user.allRoles"
                                    :key="role.id"
                                    :label="role.rnameZh"
                                    :value="role.id">
                            </el-option>
                        </el-select>
                    </p>
                </div>
            </el-card>
        </div>
        <el-pagination
                @current-change="currentChange"
                background
                :current-page="pageNum"
                :page-size="pageSize"
                layout="prev, pager, next"
                :total="total">
        </el-pagination>
    </div>
</template>

<script>
    export default {
        name: "UserManage",
        data(){
            return{
                updateRoleUserId : {
                    id : 0,
                    rid : [],
                },
                allRoles : [],
                total : 0,
                userData: [],
                pageNum : 1,
                pageSize : 2,
                roleId : [],
                userKeyWords :''
            }
        },
        methods: {
            switchChange(user,lockOrEnable) {
                if (lockOrEnable == true) {
                    this.$putRequest('/user/isEnabled',user).then(resp => {
                        this.initUsers();
                    });
                }else{
                    this.$putRequest('/user/isLocked',user).then(resp => {
                        this.initUsers();
                    });
                }
            },
            tagChange(user){
                this.updateRoleUserId.id = user.id;
                this.updateRoleUserId.rid = user.rid;
            },
            removeTag(delTag){
                this.$deleteRequest('/user/delUserRole/'+this.updateRoleUserId.id+'/'+delTag).then(resp => {
                        this.initUsers();
                })
            },
            // 当前页变化回调
            currentChange(pageNum) {
                this.pageNum = pageNum;
                this.initUsers();
            },
            // 查询用户
            initUsers() {
                this.$getRequest('/user/getUsers?serchKeyWord=' + this.userKeyWords + '&pageNum=' + this.pageNum + '&pageSize=' + this.pageSize).then(resp => {
                    if (resp) {
                        this.userData = resp.list;
                        this.total = resp.total;
                    }
                })
            }
        },
        mounted() {
            this.initUsers();
        }
    }
</script>

<style scoped>
    .serchHeader {
        margin: 10px 0;
    }
    .cateSerchBtn{
        width: 400px;
        margin-right: 10px;
    }
    .text {
        font-size: 14px;
        color: #303133;
    }
    .clearfix:before,.clearfix:after {
        display: table;
        content: "";
    }
    .clearfix:after {
        clear: both
    }
    .box-card {
        width: 480px;
    }
    .rolesStyle{
        width: 80%;
    }
</style>